<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Map</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false"
            type="text/javascript">
	</script>
    <script type="text/javascript">
	// place a marker in specific location. marker click will open an info window with original traffc image and button.click on this button will change the original image to transform image//
	// and another click buton.click on this button will place the transform image into the correspondin road/// 
            var map;
			var a;
			var b;
			var i=0;
			var point;
			var marker;
			//initialize(); 
			function myPopup1()
							{

                               var a;
							   for(var j=1;j<=1;j++){
							   

							   var boundaries = new GLatLngBounds(new GLatLng(43.8367662627843,-79.5474421977996), new GLatLng(43.837100968424195,-79.547180682420));
					//var f[j]="traffic"+j+".jpg";
					//var f[j]='<img src=f[j] width=250 height=180/><br/>'
                               var oldmap = new GGroundOverlay("traffic.jpg", boundaries);
								// map.addControl(new GSmallMapControl());
								//map.addControl(new GMapTypeControl());
								//marker.openInfoWindow(f[j]);
								map.addOverlay(oldmap);
								}
							   
							   
                            }
			
			function myPopup()
							{

                               //var a1='<img src="Hydrangeas.jpg" width=150 height=80/><br/>'+ "This is transform image" ;
							    var a1='<img src="traffic1.jpg" width=250 height=180/><br/>'+ "This is transform image<br/>" + '<input type="button" id="btnPrueba" value="transform image on road" onclick="myPopup1()"/>';
							   var a2="aaaaa";
							   marker.openInfoWindow(a1);
							   //alert("aaa");
							   
							   
                            }
			function initialize() 
			{
			
				if (GBrowserIsCompatible()) 
				{
					
					//map = new GMap2(document.getElementById("map_canvas"));
					//map.setCenter(new GLatLng(43.716491 , -79.518753), 15);
					//GEvent.addListener(map,"click", function(overlay, latlng) 
					//{     
					    //if (latlng) 
					    //{ 
						
						   
							//var a=latlng.lat();
							//var b=latlng.lng();
							//point =new Marker(new LatLng(43.7187411617, -79.5207032561));
							 map = new GMap2(document.getElementById('map_canvas'));
//map.addControl(new GSmallMapControl());
map.setMapType(G_SATELLITE_MAP);
map.setCenter(new GLatLng(43.83671305795762,-79.547336250543), 18);
// Creating a new marker
 marker = new GMarker(new GLatLng(43.83671305795762,-79.547336250543));

// Adding a click-event to the marker
GEvent.addListener(marker, 'click', function() {


  var address1= '<input type="button" onClick="myPopup()" value="POP!">';
  // When clicked, open an Info Window
  var address='<img src="traffic1.jpg" width=250 height=180/><br/>' + "This is original image</br>" + '<input type="button" id="btnPrueba" value="transform image" onclick="myPopup()"/>';
   marker.openInfoWindow(address); 
 
});
// Add marker to map
map.addOverlay(marker);
var polyline = new GPolyline([
  new GLatLng(43.8367662627843,-79.5474421977996),
  new GLatLng(43.83676723014436,-79.547175318002)
], "#ff0000", 5);

var polyline1 = new GPolyline([
  new GLatLng( 43.837098066360234,-79.54745829105377),
  new GLatLng(43.837100968424195,-79.547180682420)
], "#0000FF", 5);


map.addOverlay(polyline);
map.addOverlay(polyline1);

							
							
							/*var myHtml = "latitude: " + a + " longitude " + b;
							var address='<img src="smart-car.jpg" width=150 height=80/><br/>' + "This is original image</br>" + '<input type="button" id="btnPrueba" value="transform image" onclick="removeMarker()"/>';
                            // <font size="2" face="Arial"><b>INDIA</b><br/><br/>Home.<br/>' + 
                            var address1= '<input type="button" id="btnPrueba" value="transform_img" onclick="removeMarker()"/>';
                            // map.openInfoWindow(point, myHtml);
							map.openInfoWindow(point, address);*/
							
   
					    //}
					//});
           
				
				map.setUIToDefault();
			}
		}


    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
		<div id="map_canvas" style="width: 1200px; height: 900px"></div>
  </body>
</html>